<template>
  <div class="panel-wrapper">
    <div class="tabbar-wrapper">
      <div
        class="tabbar-item"
        :class="{ active: tabbarIndex === 1 }"
        @click="tabbarClick(1)"
      >
        统计概括
      </div>
      <div
        class="tabbar-item"
        :class="{ active: tabbarIndex === 2 }"
        @click="tabbarClick(2)"
      >
        车辆信息
      </div>
    </div>
    <div class="panel-item">
      <div class="panel-item-title">客户配送信息</div>
      <div class="panel-item-wrapper delivery-situation">
        <div class="item-delivery">
          <div class="item-delivery-icon delivered-start"></div>
          <div class="item-delivery-info">
            <div class="item-delivery-info-label">待配送客户数</div>
            <div class="item-delivery-info-value"><span>621</span>辆</div>
          </div>
        </div>
        <div class="item-delivery">
          <div class="item-delivery-icon delivered-end"></div>
          <div class="item-delivery-info">
            <div class="item-delivery-info-label">已配送客户数</div>
            <div class="item-delivery-info-value"><span>621</span>辆</div>
          </div>
        </div>
        <div class="item-delivery">
          <div class="item-delivery-icon online"></div>
          <div class="item-delivery-info">
            <div class="item-delivery-info-label">当前在线车辆</div>
            <div class="item-delivery-info-value"><span>621</span>辆</div>
          </div>
        </div>
        <div class="item-delivery">
          <div class="item-delivery-icon offline"></div>
          <div class="item-delivery-info">
            <div class="item-delivery-info-label">离线车辆</div>
            <div class="item-delivery-info-value"><span>621</span>辆</div>
          </div>
        </div>
      </div>
    </div>
    <div class="panel-item">
      <div class="panel-item-title">车辆实时信息</div>
      <div class="scroll-wrapper">
        <div class="scroll-header">
          <div class="item-wrapper">
            <div class="item-info item-info-label">序号</div>
            <div class="item-info item-info-label">车牌号</div>
            <div class="item-info item-info-label">司机</div>
            <div class="item-info item-info-label">配送客服</div>
          </div>
        </div>
        <div class="scroll-body">
          <vue3-seamless-scroll
            hover-stop="true"
            v-if="userStore.userData"
            :list="userStore.userData"
            :hover="true"
            :step="0.3"
          >
            <div
              class="item-wrapper"
              v-for="(item, index) in userStore.userData"
              :key="item.idCard"
            >
              <div class="item-info item-info-value">{{ index + 1 }}</div>
              <div class="item-info item-info-value">
                {{ item.numberplate }}
              </div>
              <div class="item-info item-info-value">{{ item.userName }}</div>
              <div class="item-info item-info-value">99</div>
            </div>
          </vue3-seamless-scroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { useCityStore, useUserStore } from "@/store/index";
const cityStore = useCityStore();
const userStore = useUserStore();
const tabbarIndex = ref(1);
const config = reactive({
  header: ["序号", "车牌号", "司机", "配送客服"],
  data: [],
  rowNum: 5, //展示的行数
  columnWidth: [50, 120, 100, 120],
  align: ["center"],
});

// tabbar 切换
const tabbarClick = (type) => {
  tabbarIndex.value = type;
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
.panel-wrapper {
  padding: 16px 20px;
  width: 320px;
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  background: linear-gradient(90deg, rgba(8, 14, 30, 0.4) 0%, #080e1e 100%);
  position: fixed;
  top: 80px;
  right: 0;
  z-index: 10;

  display: flex;
  flex-direction: column;
  gap: 24px;

  .tabbar-wrapper {
    width: 280px;
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .tabbar-item {
      width: 140px;
      height: 40px;
      font-size: 16px;
      text-align: center;
      line-height: 40px;
      color: #29f1fa;
      background: url("@/assets/images/rightPanel/tabbar-bg.png");
      background-repeat: round;
      &.active {
        background: url("@/assets/images/rightPanel/tabbar-active-bg.png");
        background-repeat: round;
        color: #ffffff;
      }
    }
  }

  .panel-item {
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    .panel-item-title {
      padding-left: 40px;
      width: 100%;
      height: 50px;
      background: url("@/assets/images/rightPanel/title-bg.png");
      background-repeat: round;

      font-size: 24px;
      font-weight: 500;
      line-height: 50px;
      color: rgba(255, 255, 255, 0.87);
      text-shadow: 0px 2px 24px rgba(27, 126, 242, 0.91);
    }

    .panel-item-wrapper {
      width: 100%;
      min-height: 344px;
      /* 自动布局 */
      display: flex;
      flex-direction: column;
      gap: 24px;
      align-self: stretch;

      .item-delivery {
        display: flex;
        align-items: center;
        gap: 14px;
        color: rgba(255, 255, 255, 0.64);
        .item-delivery-icon {
          margin-left: 20px;
          width: 64px;
          height: 64px;
          &.delivered-start {
            background: url("@/assets/images/rightPanel/delivered-start-icon.png");
            background-repeat: round;
          }
          &.delivered-end {
            background: url("@/assets/images/rightPanel/delivered-end-icon.png");
            background-repeat: round;
          }
          &.online {
            background: url("@/assets/images/rightPanel/online-icon.png");
            background-repeat: round;
          }
          &.offline {
            background: url("@/assets/images/rightPanel/offline-icon.png");
            background-repeat: round;
          }
        }
        .item-delivery-info-label {
          font-size: 16px;
          line-height: 20px;
        }
        .item-delivery-info-value {
          margin-top: 8px;
          span {
            font-size: 32px;
            font-weight: 500;
            line-height: 40px;
            color: #ffffff;
            text-shadow: 0px 1px 11px rgba(27, 126, 242, 0.83);
          }
        }
      }
    }

    .scroll-wrapper {
      margin-top: -24px;
      // border: 1px solid red;
      .scroll-header {
        width: 100%;

        .item-wrapper {
          height: 36px;
          background: none !important;
        }
      }
      .scroll-body {
        width: 100%;
        height: 265px;
        overflow: hidden;
      }
      .item-wrapper {
        padding: 0 8px;
        display: flex;
        width: 100%;
        height: 52px;
        font-size: 14px;
        line-height: 36px;
        color: #ffffff;
        text-align: center;
        background-image: url("@/assets/images/rightPanel/row-item-bg.png") !important;
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100% 36px;
        background-color: transparent !important;
        cursor: pointer;

        .item-info:nth-child(1) {
          width: 50px;
          color: #00ffe0;
        }
        .item-info:nth-child(2) {
          width: 134px;
        }
        .item-info:nth-child(3) {
          width: 100px;
        }
        .item-info:nth-child(4) {
          width: 110px;
          color: #f9e20a;
        }
        .item-info-label {
          color: #ffffff !important;
        }
      }
    }
  }
}
</style>
